<!--<div fxLayout="row">-->
  <!--<div fxFlex>First item in row</div>-->
  <!--<div fxFlex>Second item in row</div>-->
<!--</div>-->
<!--<div fxLayout="column">-->
  <!--<div fxFlex>First item in column</div>-->
  <!--<div fxFlex>Second item in column</div>-->
<!--</div>-->
<div class="container"
     fxLayout="row "
     fxLayout.xs="column"
     fxLayoutAlign="start"
     fxLayoutGap="20px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="33" fxFlexOrder="1">&nbsp;

  </div>
  <div class="item item-2" fxFlex="33" fxFlexOrder="2" >

  </div>
  <div class="item item-3" fxFlex="33" fxFlexOrder="3">

  </div>
</div>
<mat-progress-bar [color]="'primary'" [mode]="progressBarMode">
</mat-progress-bar>
<!--<header>-->
  <!--<nav>-->
    <!--<div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">-->
      <!---->
    <!--</div>-->
  <!--</nav>-->
  <!--&lt;!&ndash;<section class="progress-bar">&ndash;&gt;-->
    <!--&lt;!&ndash;<mat-progress-bar [color]="'primary'" [mode]="progressBarMode">&ndash;&gt;-->
    <!--&lt;!&ndash;</mat-progress-bar>&ndash;&gt;-->
  <!--&lt;!&ndash;</section>&ndash;&gt;-->
<!--</header>-->
